<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Browser test | Date picker | 004 popup placement</title>
    <link rel="stylesheet" href="../index.css" />
    <style>
      body {
        margin: 0;
      }

      #app {
        position: relative;
        width: 100vw;
        height: 100vh;
      }

      .date-picker-top-left {
        position: absolute;
        top: 10px;
        left: 10px;
      }

      .date-picker-top-right {
        position: absolute;
        top: 10px;
        right: 10px;
      }

      .date-picker-bottom-left {
        position: absolute;
        bottom: 10px;
        left: 10px;
      }

      .date-picker-bottom-right {
        position: absolute;
        bottom: 10px;
        right: 10px;
      }

      .modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 300px;
        background-color: lightgray;
      }
    </style>
  </head>
  <body>
    <div id="app" style="margin: 0 auto">
      <div class="date-picker-top-left"></div>
      <div class="date-picker-top-right"></div>
      <div class="date-picker-bottom-left"></div>
      <div class="date-picker-bottom-right"></div>

      <div class="modal">
        <div class="date-picker-in-modal"></div>
      </div>
    </div>
    <script defer type="module" src="./004-popup-placement.ts"></script>
  </body>
</html>
